import { cva, type VariantProps } from 'class-variance-authority'
export { default as Button } from './main.vue'

//   padding: 0 1.5em 0 1em;
//   background: #f2f2f2;
//   position: relative;
//   color: inherit;
//   cursor: pointer;

export const SelectVariants = cva(['relative', 'bg-gray-100', 'text-current', 'cursor-pointer'], {
  variants: {
    size: {
      default: ['px-4', 'py-2', 'has-[>svg]:px-3'],
      sm: ['px-3', 'py-1', 'has-[>svg]:px-2.5'],
      lg: ['h-10', 'rounded-md', 'px-6', 'has-[>svg]:px-4']
    }
  },
  defaultVariants: {
    size: 'default'
  }
})

export type SelectVariants = VariantProps<typeof SelectVariants>

//     background: none;
//     font-size: 1em;
//     line-height: 2em;
//     letter-spacing: 0px;
//     border: none;
//     outline: unset;
//     border-radius: 0;
//     width: 100%;
//     -webkit-appearance: none;
//     color: #606266;
//     cursor: pointer;
export const SelectInputVariants = cva(
  [
    'bg-transparent',
    'text-base',
    'leading-2',
    'tracking-normal',
    'border-none',
    'outline-none',
    'rounded-none',
    'w-full',
    'appearance-none',
    'text-gray-500',
    'cursor-pointer'
  ],
  {
    variants: {
      size: {
        default: [],
        sm: ['text-sm'],
        lg: ['text-lg']
      }
    },
    defaultVariants: {
      size: 'default'
    }
  }
)

export type SelectInputVariants = VariantProps<typeof SelectInputVariants>

//     position: absolute;
//     left: 0;
//     top: 100%;
//     width: 100%;
//     background-color: #fff;
//     z-index: 1001;
//     border: 1px solid #e4e7ed;
//     border-radius: 4px;
//     background-color: #fff;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
//     box-sizing: border-box;
//     margin: 5px 0;
//     .scrollbar__wrap {
//       max-height: 200px;
//     }

export const SelectMenuVariants = cva(
  [
    'absolute',
    'left-0',
    'top-full',
    'w-full',
    'bg-white',
    'z-[1001]',
    'border',
    'border-gray-200',
    'rounded',
    'shadow-md',
    'box-border',
    'my-1'
  ],
  {
    variants: {
      size: {
        default: [],
        sm: ['text-sm'],
        lg: ['text-lg']
      }
    },
    defaultVariants: {
      size: 'default'
    }
  }
)

export type SelectMenuVariants = VariantProps<typeof SelectMenuVariants>

//     font-size: 14px;
//     padding: 0 20px;
//     position: relative;
//     white-space: nowrap;
//     overflow: hidden;
//     text-overflow: ellipsis;
//     color: #606266;
//     height: 34px;
//     line-height: 34px;
//     box-sizing: border-box;
//     cursor: pointer;

//     &:hover {
//       background-color: #f5f7fa;
//     }

export const SelectOptionVariants = cva(
  [
    'text-sm',
    'px-5',
    'relative',
    'whitespace-nowrap',
    'overflow-hidden',
    'text-ellipsis',
    'text-gray-500',
    'h-[34px]',
    'leading-[34px]',
    'box-border',
    'cursor-pointer',
    'hover:bg-gray-50'
  ],
  {
    variants: {
      size: {
        default: [],
        sm: ['h-[28px]', 'leading-[28px]'],
        lg: ['h-[40px]', 'leading-[40px]', 'text-base']
      },
      active: {
        true: ['text-primary'],
        false: []
      }
    },
    defaultVariants: {
      size: 'default',
      active: false
    }
  }
)

export type SelectOptionVariants = VariantProps<typeof SelectOptionVariants>

//     cursor: pointer;

//     position: absolute;
//     height: 100%;
//     right: 0;
//     top: 0;
//     text-align: center;
//     color: #c0c4cc;
//     transition: all 0.3s;
//     line-height: 2em;
//     width: 1.5em;

//   &:focus {
//     outline: none;
//   }
export const SelectSuffixVariants = cva(
  [
    'cursor-pointer',
    'absolute',
    'h-full',
    'right-0',
    'top-0',
    'text-center',
    'text-gray-400',
    'transition-all',
    'duration-300',
    'leading-8',
    'w-[1.5em]',
    'focus:outline-none'
  ],
  {
    variants: {
      size: {
        default: [],
        sm: ['text-xs'],
        lg: ['text-lg']
      }
    },
    defaultVariants: {
      size: 'default'
    }
  }
)

export type SelectSuffixVariants = VariantProps<typeof SelectSuffixVariants>
